<template>
	<view class="page">
		<view class="nav">
			<view class="nav-name">
				<view @click="carshow=1" :class="carshow==1?'active':''">新车</view>
		<!-- 		<view @click="carshow=2" :class="carshow==2?'active':''">二手车</view> -->
			</view>
	<!-- 		<view class="car">
				<u-search shape="square" :showAction="true" actionText="搜索" :animation="true"></u-search>
			</view> -->
		</view>
		<view class="bot content">
			<view class="list">
				<view class="col" @click="$goBack(2,'/bundle/pages/allcar/allcar?id='+item.id)" v-for="(item,index) in list.slice(0,10)" :key="index">
					<image class="img" :src="item.brandImg"></image>
					<view class="writing">{{item.brandName}}</view>
				</view>
			</view>
		</view>
		<image v-if="carshow==2" style="margin: 16rpx; height:338rpx; width: 718rpx;" src="../../../static/car.png"></image>
		<view class="bot content">
			<view class="botzise">推荐车系</view>

			<swiper style="height: 600rpx;" indicator-dots>
				<swiper-item>
					<view class="list1">
						<view v-for="(item,index) in recommendList" class="col1" @click="$goBack(2,'/bundle/pages/vehicledetails/vehicledetails?id='+item.id)">
							<image :src="item.carSeriesImg"></image>
							<view class="writing">{{item.carSeriesName}}</view>
							<view>指导价：{{item.carSeriesPrice}}</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>

		<TindexList @brands="nue"></TindexList>
		<view style="margin-top:100rpx; visibility: hidden;">1</view>
		<u-tabbar :value="value1" @change="change1" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true"  activeColor="#F7B530" >
			<u-tabbar-item text="首页"  @click="home">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/home.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/home-t.png"></image>
			</u-tabbar-item>
			<u-tabbar-item  text="车市场" @click="photo">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/car.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/car-t.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的"  @click="my">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/tabber/my.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/tabber/my-t.png"></image>
			</u-tabbar-item>
		</u-tabbar>
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		apiGetRecommendList,
		apisortByInitial11
	} from '@/api/car.js'
	import list from '../../../uni_modules/uview-ui/libs/config/props/list'
	import TindexList from "./indexlist.vue"
	export default {
		data() {
			return {
				value1: 1,
				indicator: true,
				lists: [1, 2, 3, 5, 6, 1],
				list: [],
				recommendList:[],
				carshow:1

			}
		},
		components: {
			TindexList
		},
		methods: {
			getRecommendList(){
				apiGetRecommendList().then(res=>{
					this.recommendList = res.data;
				})
			},
			sortByInitial() {
				apisortByInitial11().then((res) => {
					for (let item in res.data) {
						res.data[item].forEach(it => {
							this.list.push(it)
						})
					}
					// this.list = res.data

				})
			},
			nue() {},
			click1(e) {
				this.value1 = e
				console.log('click1', e);
			},
			home() {
				uni.redirectTo({
					url: "/pages/home/home"
				})
			},
			my() {
				uni.redirectTo({
					url: "/pages/my/my"
				})
			},
			photo() {
				uni.redirectTo({
					url: "/pages/carsupermarket/carsupermarket"
				})
			},
		},
		onLoad() {
			this.sortByInitial()
			this.getRecommendList();
		}
	}
</script>

<style scoped lang="scss">
	.u-page__item__slot-icon{
		width: 50rpx;
		height: 50rpx;
	}
	.nav {
		height: 264rpx;
		background: linear-gradient(#FACC39 0%, #fff 100%);

		.nav-name {
			box-sizing: border-box;
			padding-top: 90rpx;
			display: flex;

			view {
				margin-left: 32rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.active {
				color: #000;
				font-weight: 600;
				font-size: 32rpx;
			}

		}
	}

	::v-deep .u-search {
		width: 700rpx;
		margin: 24rpx !important;
	}

	.page {
		position: relative;
		background-color: #fff;
		width: 100vw;
		height: 100vh;
	}

	.content {
		margin: 16rpx;
		background-color: #fff;
	}

	.bot {
		padding: 16rpx;

		.botzise {
			font-weight: 600;
			font-size: 34rpx;
			margin-bottom: 10rpx;
		}

		.list {

			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.col {
				margin-right: 10rpx;
				margin-top: 18rpx;
				width: 120rpx;
				text-align: center;

				image {
					width: 84rpx;
					height: 84rpx;
				}

				.writing {
					font-size: 28rpx;

				}
			}



			.col:nth-of-type(5n+0) {

				margin-right: 0;

			}
		}

		.list1 {
			width: 700rpx;
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;


			.col1 {
				font-size: 28rpx;
				margin-right: 10rpx;
				margin-top: 18rpx;
				width: 198rpx;
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
				}


				.writing {
					font-weight: 600;
					font-size: 28rpx;

				}
			}

			.col1:nth-of-type(3n+0) {

				margin-right: 0;

			}
		}
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: #c3c3c7 1rpx solid;

		.cell {
			margin: 15rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>